// 这个 main.ts 是 Vue 项目的入口文件，它的主要作用是：
//   初始化 Vue 应用、引入依赖库、配置路由和 UI 框架，并最终将应用挂载到页面上。

// 引入全局样式文件 global.css，通常用于定义整个应用的通用样式（如字体、颜色、布局等）。
import './assets/global.css'

// 从 vue 中导入 createApp 方法，用于创建 Vue 应用实例。
import { createApp } from 'vue'
// 导入根组件 App.vue，这是整个前端应用的最外层组件容器。
import App from './App.vue'
// 创建一个 Vue 应用实例 app，并传入根组件 App.vue。
const app = createApp(App)

// 导入之前配置好的 Vue Router 实例 router，用于管理页面之间的导航。
import router from "./router/index";

// 引入 Element Plus 这个基于 Vue 的 UI 组件库。
import ElementPlus from "element-plus";
// 引入 Element Plus 的样式文件，用于使 Element Plus 的组件样式生效。
import "element-plus/dist/index.css";
// 引入 Element Plus 的中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 引入Pinia状态管理库
import { createPinia } from 'pinia'
import { useProfileStore } from './store/profile'
const pinia = createPinia()

// 注册Pinia状态管理
app.use(pinia);
const profileStore = useProfileStore()
// 使用 app.use() 注册路由插件，使 Vue 应用具备路由功能。
app.use(router);
// 将 ElementPlus 注册为 Vue 插件
app.use(ElementPlus, {
  locale: zhCn,
});

// 最后调用 mount 方法，将 Vue 应用挂载到 HTML 中的 <div id="app"></div> 元素上。
app.mount("#app");

// createApp(App).use(ElementPlus, {locale: zhCn,}).use(router).use(createPinia).mount('#app')
